<template>
  <div class="skpz">
    <div class="handle leftHandle" @click="clickLeft">
      <a-icon class="close-icon" type="right" title="展开" />
    </div>
    <div class="map" id="map"></div>
    <div style="position: absolute;left: 50%;top: 50%;margin-top:-16px;margin-left:-32px;">
      <a-spin :spinning="searchLoading" tip="" size="large" />
    </div>
    <div v-show="isLoading" class="loading"><a-icon type="loading" />查询中...</div>
    <track-list
      ref="trackDrawerId"
      :visible="isTaskAddShow"
      :addPoint="newPoint"
      @on-change-point="drawTaskAddDrawer"
      @close="closeTaskAddDrawer"
      @cancel="cancelTaskAddDrawer"
      :isAdd="isAdd"
      @copyAndAdd="onCopyAndAdd"
      @on-submit-success="submitSuccess"
      @on-task-details-drawer="drawTaskDetailsDrawer"
    />
  </div>
</template>

<script>
import { testFloat } from '@/libs/tools'
import trackList from './components/trackList'
import mapMarker from '../../modules/mapMarker'

export default {
  mixins: [mapMarker],
  components: {
    trackList,
  },
  data() {
    return {
      newPoint: null,
      isSend: false,
      isLoading: false,
      searchValue: '',
      searchAddressList: [],
      MarkerList: '',
      searchLoading: false,
      searchListshow: false,
      sanjiaoBox: {
        longitude: '',
        latitude: '',
        text: '',
        left: 0,
        top: 0
      },
      isShowSanjiaoLabel: false,
      taskDetail: [], // 案事件详情
      isTaskListShow: true,
      isTaskAddShow: false,
      isTaskDetailShow: false,
      isYpListShow: false,
      rightVisible: false,
      isAdd: 'false', //添加任务
      isDetailClose: false,
      itemId: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.onAddTask()
    })
  },
  methods: {
    //缩进添加或者详情框
    closeTaskAddDrawer() {
      this.isDetailClose = true
      this.isTaskAddShow = false
    },
    //返回到任务列表
    cancelTaskAddDrawer() {
      this.isDetailClose = false
      this.isTaskAddShow = false
      this.isTaskListShow = true
      // 关闭查询轨迹弹窗
      this.map.clearOverlays()
      this.map.removeEventListener('click', this.getMapPoint)
    },
    clickLeft() {
      this.onAddTask()
    },
    onAddTask() {
      this.isAdd = true
      this.isTaskListShow = false
      this.isTaskAddShow = true
      // this.map.clearOverlays()
      this.isLoading = false
      this.map.addEventListener('click', this.getMapPoint)
    },
    submitSuccess(value) {
      this.$emit('on-transport-vehicle', value)
      this.isTaskListShow = true
      this.isTaskAddShow = false
      // this.$refs.taskListDrawerId.refreshTable()
    },
    onCopyAndAdd() {
      this.isAdd = true
      this.isLoading = false
      this.map.addEventListener('click', this.getMapPoint)
    },
    onDetail(datas) {
      this.$nextTick(() => {
        console.log(datas)
        let list = datas.map((obj, index) => {
          return {
            key: index,
            ...obj
          }
        })
        this.$refs.trackDrawerId.getDetail(list)
      })
    },
    getText(text) {
      if (!text) return ''
      let l = text.split('\n')
      let s = ''
      l.forEach(v => {
        s += `<p>${v}</p>`
      })
      return s
    },
    // 判断输入的轨迹点是否完整
    setAccordList(data) {
      return data.filter(item => {
        return !testFloat(item.longitude) && !testFloat(item.latitude)
      })
    },
    // 获取地图某点坐标
    getMapPoint(e) {
      this.newPoint = {
        longitude: e.point.lng,
        latitude: e.point.lat
      }
    },
    // 响应查询轨迹弹窗添加轨迹
    drawTaskAddDrawer(data, type, key) {
      const list = this.setAccordList(data)
      this.map.clearOverlays()
      this.drawOverlay(list, type)
      this.panTo(list, key)
    },
    drawTaskDetailsDrawer2_startLoad() {
      this.isLoading = true
    },
    // 轨迹查询结果
    drawTaskDetailsDrawer1(data) {
      this.isLoading = false
      // 设置所有查询到的轨迹点数组
      this.$refs.piontDrawer.setPointData(data[0])
      //默认第一条轨迹点数据
      this.$refs.piontDrawer.show(true, 0)
    },
    //点击号码响应，显示对应的轨迹信息
    drawTaskDetailsDrawer2(index) {
      this.$refs.piontDrawer.show(true, index)
    }
  }
}
</script>

<style scoped lang="less">
.skpz {
  position: relative;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
  z-index: 800;
  // height: 650px;
  overflow: hidden;
  .skpz-search-address {
    position: absolute;
    right: 10px;
    top: 36px;
    width: 350px;
    .search-address-list {
      width: 302px;
      top: 38px;
      left: 0px;
      background-color: #fff;
      color: #aaa;
      font-size: 12px;
      height: 300px;
      overflow-y: scroll;
      .search-address-name {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-bottom: 1px solid #d9d9d9;
        cursor: pointer;
      }
    }
  }
  /deep/span.BMap_Marker {
    img {
      display: none !important;
    }
  }
  /deep/.ant-drawer-header {
    background-color: #f2f2f2 !important;
  }
  /deep/.ant-drawer-title {
    margin: 0;
    color: rgba(0, 0, 0, 0.85) !important;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
  }
  /deep/.ant-drawer-close {
    color: rgba(0, 0, 0, 0.45) !important;
  }
  /deep/ .ant-drawer-content-wrapper {
    height: 100% !important;
  }
  .breadcrumb-box {
    position: absolute;
    right: 20px;
    top: 7px;
    z-index: 10000;
  }
}
.search {
  position: absolute;
  left: 10px;
  top: 0;
  z-index: 5;
  padding: 15px;
  border-radius: 0 0 5px 0;
  cursor: pointer;
}

.map {
  .skpz;
  top: 0;
  transition: all 0.3s;
  &.offset-x-30 {
    left: 30%;
  }
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100px);
  border-radius: 10px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  i {
    margin-right: 12px;
  }
}
.handle {
  position: absolute;
  display: inline-block;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.leftHandle {
    left: 0;
  }
  &.rightHandle {
    right: 0;
  }
}
</style>
